<template>
	<view class="shops-card-container" @click="getShopInfo">
		<u-image width="319rpx" height="350rpx" :src="details.img"></u-image>
		<view class="info">
			<p class="name">{{details.name}}</p>
			<p class="num">{{details.num}} Product</p>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shopsCard",
		props: {
			details: {
				default: () => ({}),
				type: Object
			}
		},
		data() {
			return {

			};
		},
		onLoad() {
			
		},
		methods: {
			getShopInfo() {
				
				uni.navigateTo({
					url: '/pages/searchInfo/components/shopsCard/shopsHomepage/index'
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shops-card-container {
		-webkit-column-break-inside: avoid;
		position: relative;

		/deep/uni-image {
			border-radius: 30rpx !important;
		}

		.info {
			position: absolute;
			bottom: 0;
			background: rgba(255, 255, 255, 0.8);
			width: 100%;
			border-radius: 30rpx;
			width: 320rpx;
			height: 103rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			padding-bottom: 15rpx;


			.name {
				width: 100%;
				color: #989AA6;
				margin-top: 5rpx;
				font-size: 30rpx;
				text-align: center;
				color: #1B1D29;
			}

			.num {
				width: 100%;
				color: #3E2F25;
				font-size: 34rpx;
				text-align: center;
				color: #000000;
				font-size: 22rpx;

			}
		}
	}
</style>